<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js/fun.js" type="text/javascript"></script>
        <script src="js/config.js" type="text/javascript"></script>
        <script src="js/path.js" type="text/javascript"></script>
        <script src="js/port.js" type="text/javascript"></script>
        <script src="js/portodf.js" type="text/javascript"></script>
        <script src="js/device.js" type="text/javascript"></script>
        <script src="js/odf_connect.js" type="text/javascript"></script>
        <script src="data/odfconnect.js" type="text/javascript"></script>
    </head>
    <style type="text/css">
        body{background: #517470}
        canvas{background: #517470}
        .list{position: absolute;top:20px;left:20px;}
        .list .slot-item{display: inline-block;text-align: center;}
        .list .slot-item.active span{background: green;}
        .list .slot-item span{display: inline-block;cursor: pointer;line-height: 30px;width: 30px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;margin:0 5px;}
    </style>
    <script type="text/javascript">
        var can = null;//画布相关dom
        var canvas = null;//保存画布.
        var unit_id = 7;//要画出的设备号
        var unit_name = '#ODF';//光配名称
        var dataStep1 = portInfo;
        var dataStep2 = cubicleConnection;
        var dataStep3 = unitConnection;
        var chart = null;//绘图对象
        function pageLoad(){
            can = $$('canvas');
            canvas = can.getContext('2d');
            can.width = window.innerWidth - 60;
            can.height = window.innerHeight - 60;
            //传入canvas对象，与事件坐标参数
            var windowToCanvas = function(canvas, x, y){
                var bbox;
                bbox = canvas.getBoundingClientRect();
                return {
                    x: (x - bbox.left) * (canvas.width / bbox.width),
                    y: (y - bbox.top) * (canvas.height / bbox.height)
                };
            };
            $$('canvas').onclick = function(){
                var point = windowToCanvas(this, event.clientX, event.clientY);
                var port = chart.getPortByPoint(point.x, point.y);
                if(port != null){
                    var msg ="";  
                    for(var name in port){
                        if(name == 'data'){
                            var dataMsg = "";
                            for(var k in port[name]){
                                dataMsg += k+":"+port[name][k]+',';
                            }
                            msg += name+": {"+ dataMsg+"}\n "; 
                        }else{
                            msg += name+": "+ port[name]+"\n "; 
                        } 
                    } 
                    alert(msg);
                    console.log(port);
                }
            };

            //解析数据，显示窗口
            var slotName = {};
            for(var k in dataStep1.list){
                var v = dataStep1.list[k];
                if(!slotName.hasOwnProperty(v.SLOT)){
                    slotName[v.SLOT] = v.SLOT;
                }
            }
            var itemHtml = '';
            for(var k in slotName){
                itemHtml += '<div class="slot-item" data-slotname="'+slotName[k]+'"><span class="">'+slotName[k]+'</span></div>';
            }
            $$('list').innerHTML += itemHtml;
            //查找所有可选项
            var pathDoms = document.getElementsByClassName("slot-item");
            for(var i = 0; i < pathDoms.length; i++){
                var d = pathDoms[i];
                d.onclick = function(){
                    for(var j = 0; j < pathDoms.length; j++){
                        removeClass(pathDoms[j], 'active');
                    }
                    addClass(this, 'active');
                    var slotName = this.dataset['slotname'];
                    if(slotName == null){
                        alert('错误的SLOT名称！');
                    }else{
                        can.height = can.height;
                        drawDiagram(slotName);
                    }
                };
            }
            if(pathDoms.length ==0){
                alert('数据错误！');
            }else{
                addClass(pathDoms[0], 'active');
                var slotName = pathDoms[0].dataset['slotname'];
                drawDiagram(slotName);
            }
        }
        function drawDiagram(slotName){
            //接续数据，画图
            chart = ODFConnectChart.parseFrom(unit_id, slotName, dataStep1, dataStep2, dataStep3);
            chart.device.name = unit_name;

            if(can.width < chart.getTotalWidth()){
                can.width = chart.getTotalWidth() + 50;
            }
            if(can.height < chart.getTotalHeight()){
                can.height = chart.getTotalHeight() + 50;
            }
            chart.x = (can.width - chart.getTotalWidth()) / 2;
            chart.y = (can.height - chart.getTotalHeight()) / 2;
            chart.draw(canvas);
        }
        function $$(id){
            return document.getElementById(id);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="canvas" width="400px" height="300px">4</canvas>
        <div class="list" id="list">
            
        </div>
    </body>
    <script type="text/javascript">
        function hasClass(obj, cls) {  
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
        }  
        
        function addClass(obj, cls) {  
            if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
        }  
        
        function removeClass(obj, cls) {  
            if (hasClass(obj, cls)) {  
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
                obj.className = obj.className.replace(reg, ' ');  
            }  
        }
        function toggleClass(obj,cls){  
            if(hasClass(obj,cls)){  
                removeClass(obj, cls);  
            }else{  
                addClass(obj, cls);  
            }  
        }  
    </script>
</html>